<template>
  <div class="month-sales-show">
    <div class="page-header">
      <h2>月度销售详情</h2>
      <a-button @click="goBack">返回列表</a-button>
    </div>
    
    <div class="content-wrapper">
      <a-card title="月度销售概览" :bordered="false">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="统计月份">
            {{ monthSalesData.month || '暂无数据' }}
          </a-descriptions-item>
          <a-descriptions-item label="总销售额">
            <span class="text-green-600 font-bold">¥{{ monthSalesData.totalAmount || 0 }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="总销售量">
            {{ monthSalesData.totalQuantity || 0 }} 件
          </a-descriptions-item>
          <a-descriptions-item label="环比增长">
            <a-tag :color="monthSalesData.growth >= 0 ? 'green' : 'red'">
              {{ monthSalesData.growth >= 0 ? '+' : '' }}{{ monthSalesData.growth || 0 }}%
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="销售目标">
            ¥{{ monthSalesData.target || 0 }}
          </a-descriptions-item>
          <a-descriptions-item label="目标完成率">
            <a-progress 
              :percent="monthSalesData.completionRate || 0" 
              :status="(monthSalesData.completionRate || 0) >= 100 ? 'success' : 'active'"
            />
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <a-card title="产品销售排行" :bordered="false" class="mt-4">
        <a-table 
          :columns="productColumns" 
          :data-source="productSalesData" 
          :pagination="false"
          size="middle"
        >
          <template #bodyCell="{ column, index }">
            <template v-if="column.key === 'rank'">
              <a-tag :color="getRankColor(index + 1)">{{ index + 1 }}</a-tag>
            </template>
          </template>
        </a-table>
      </a-card>

      <a-card title="销售趋势分析" :bordered="false" class="mt-4">
        <a-row :gutter="16">
          <a-col :span="8">
            <a-statistic title="日均销售额" :value="trendData.dailyAverage" prefix="¥" :precision="2" />
          </a-col>
          <a-col :span="8">
            <a-statistic title="最高单日销售" :value="trendData.maxDaily" prefix="¥" />
          </a-col>
          <a-col :span="8">
            <a-statistic title="销售天数" :value="trendData.salesDays" suffix="天" />
          </a-col>
        </a-row>
      </a-card>

      <a-card title="渠道分析" :bordered="false" class="mt-4">
        <a-table :columns="channelColumns" :data-source="channelData" :pagination="false" size="middle" />
      </a-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const monthSalesData = ref({
  month: '2024年11月',
  totalAmount: 1250000,
  totalQuantity: 25000,
  growth: 15.6,
  target: 1200000,
  completionRate: 104.2
});

const productSalesData = ref([
  { key: '1', productName: '中华香烟', amount: 450000, quantity: 9000, percentage: 36 },
  { key: '2', productName: '玉溪香烟', amount: 320000, quantity: 8000, percentage: 25.6 },
  { key: '3', productName: '红塔山香烟', amount: 280000, quantity: 5600, percentage: 22.4 },
  { key: '4', productName: '云烟香烟', amount: 200000, quantity: 2400, percentage: 16 }
]);

const trendData = ref({
  dailyAverage: 40322.58,
  maxDaily: 65000,
  salesDays: 31
});

const channelData = ref([
  { key: '1', channel: '线上商城', amount: 750000, percentage: 60, orders: 1200 },
  { key: '2', channel: '线下门店', amount: 350000, percentage: 28, orders: 800 },
  { key: '3', channel: '批发渠道', amount: 150000, percentage: 12, orders: 150 }
]);

const productColumns = [
  { title: '排名', key: 'rank', width: 80 },
  { title: '产品名称', dataIndex: 'productName', key: 'productName' },
  { title: '销售金额', dataIndex: 'amount', key: 'amount' },
  { title: '销售数量', dataIndex: 'quantity', key: 'quantity' },
  { title: '占比', dataIndex: 'percentage', key: 'percentage' },
];

const channelColumns = [
  { title: '销售渠道', dataIndex: 'channel', key: 'channel' },
  { title: '销售金额', dataIndex: 'amount', key: 'amount' },
  { title: '占比', dataIndex: 'percentage', key: 'percentage' },
  { title: '订单数', dataIndex: 'orders', key: 'orders' },
];

const getRankColor = (rank: number) => {
  if (rank === 1) return 'gold';
  if (rank === 2) return 'silver';
  if (rank === 3) return 'bronze';
  return 'default';
};

const goBack = () => {
  router.back();
};

onMounted(() => {
  const id = route.params.id;
  console.log('月度销售ID:', id);
});
</script>

<style scoped>
.month-sales-show {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #1890ff;
}

.content-wrapper {
  background: #f5f5f5;
  min-height: calc(100vh - 200px);
}

.mt-4 {
  margin-top: 16px;
}

.text-green-600 {
  color: #16a34a;
}

.font-bold {
  font-weight: bold;
}
</style>

